<template>
  <div id="my">
    <!--  -->
       <!--头部-->
<div class="top">
     <div class="box">
         <!--左边部分-->
         <div class="boxLeft">
             <img src="img/toux.jpg" alt="" class="tu1">
             <div class="name">
                <router-link to="/login">
                <p class="p1 dlv" id="name" v-if="show">→请先登录←</p>
                </router-link>
                <p class="p1 dlv" id="name" v-if="!show">商城账号:&nbsp;{{user}}</p>
             </div>
         </div>
         <!--右边部分-->
         <div class="boxRight">
             <router-link to="/quited">设置</router-link>
         </div>
         <!--清除浮动-->
         <div class="clear"></div>
     </div>
     <div class="box2">
          <ul>
              <li>
                  <a href="">
                      <p class="p1">0</p>
                      <p class="p2">收藏夹</p>
                  </a>
              </li>
              <li>
                  <a href="">
                      <p class="p1">0</p>
                      <p class="p2">关注商品</p>
                  </a>
              </li>
              <li>
                  <a href="">
                      <p class="p1">0</p>
                      <p class="p2">浏览记录</p>
                  </a>
              </li>
          </ul>
     </div>
</div>
   <!--part1部分-->
<div class="part1">
    <ul>
        <li>
            <a href="">
                <p class="p1">0</p>
                <p class="p2">积分</p>
            </a>
        </li>
        <li>
            <a href="">
                <p class="p1">0</p>
                <p class="p2">优惠券</p>
            </a>
        </li>
        <li>
            <a href="">
                <p class="p1">0</p>
                <p class="p2">订单数量</p>
            </a>
        </li>
        <li>
            <a href="">
                <p class="p1">0</p>
                <p class="p2">支付订单</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/my01.png" alt="">
                <p class="p2"  style="margin-top: -3px;">消费记录</p>
            </a>
        </li>
    </ul>
</div>
   <!--part2部分-->
<div class="part2">
    <div class="box3">
        <div class="part2_title">
             <p>我的订单</p>
            <a href="">查看更多订单</a>
        </div>
        <ul>
            <li>
            <a href="">

                    <img src="img/my02.png" alt="">

                <p>待付款</p>
            </a>
            </li>
            <li>
                <a href="">

                        <img src="img/my03.png" alt="">

                    <p>待发货</p>
                </a>
            </li>
            <li>
                <a href="">

                        <img src="img/my04.png" alt="">

                    <p>待收货</p>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="d1">
                        <img src="img/my05.png" alt="">
                        <div class="yuan"></div>
                    </div>
                    <p >待评价</p>
                </a>
            </li>
            <li>
                <a href="">

                        <img src="img/my06.png" alt="">

                    <p>退款/售后</p>
                </a>
            </li>
        </ul>
    </div>
</div>
   <!--part2 头部部分-->
<div class="part2">
    <div class="box3">
        <div class="part2_title">
            <p>我的优惠券</p>
            <a href="">查看更多优惠</a>
        </div>
    </div>
</div>
   <!--part3部分-->
<div class="part3">
    <ul>
        <li>
            <a href="">
                <img src="img/my11.png" alt="">
                <p>我的活动</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/my12.png" alt="">
                <p>社区</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/my13.png" alt="">
                <p>客户服务</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/my14.png" alt="">
                <p>京东超市</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/my7.png" alt="">
                <p>我的优惠券</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/my8.png" alt="">
                <p>收货地址</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/my9.png" alt="">
                <p>我的积分</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/my10.png" alt="">
                <p>我的客服</p>
            </a>
        </li>
    </ul>
</div>
   <!--part2部分-->
<div class="part2">
       <div class="box3">
           <div class="part2_title">
               <p>天猫超市卡</p>
               <a href="">立即充值</a>
           </div>
           <div class="part2_body">
               <img src="img/my00.jpg" alt="">
               <p>账户余额：￥0.00</p>
           </div>
       </div>
   </div>
   <!--推荐-->

  </div>
</template>
<style  scoped>
/*初始化处理*/
.dlv{
    padding-left: 10px;
    font-size: 16px;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#my{
    width: 100%;
    background: #F7F7F7;
    min-height: 2.666667rem;
    padding-bottom:1.6rem ;
}
img {
    max-height: 100%;
    max-width: 100%;
    border: 0;
}
p {
    text-align: justify;
}
a {
    text-decoration: none;
    color: #666;
}
ul li{ list-style:none}
.clear{
    clear: both;
}
/*头部*/
.top{
    width: 100%;
    height: 4.16rem;
    background-size: 100%;
    /* background: url("../../public/img/my_bj.jpg") repeat-y; */
    background: #FE6266;
}
.top .box {
    padding: 0.341333rem;
}
/*左边部分*/
.top .box .boxLeft{
    float: left;
    width: 80%;
}
.top .box .boxLeft img.tu1{
    float: left;
    width: 1.28rem;
    height: 1.28rem;
    border-radius: 100%;
}
.top .box .boxLeft .name {
    float: left;
    padding: 0.266667rem 0 0 0.133333rem;
}
.top .box .boxLeft .p1 {
    color: #fff;
    font-size: 0.373333rem;
}
/*右边部分*/
.top .box .boxRight {
    float: right;
    width: 20%;
}
.top .box .boxRight a {
    display: block;
    color: #fff;
    text-align: right;
    font-size: 0.362667rem;
}
/*conbox2部分*/
.top .box2 {
    width: 80%;
    margin: 0 auto;
    padding: 0 0 1.066667rem;
}
.top .box2 ul {
    overflow: hidden;
}
.top .box2 ul li {
    float: left;
    width: 33.3%;
}
.top .box2 ul li .p1 {
    text-align: center;
    color: #fff;
    font-size: 0.341333rem;
    line-height: 0.64rem;
}
.top .box2 ul li .p2 {
    text-align: center;
    color: #fff;
    font-size: 0.32rem;
}
/*part1部分*/
.part1 {
    position: relative;
    margin-top: -0.853333rem;
    padding: 0 0.426667rem;
    margin-bottom: 2%;
}
.part1 ul {
    overflow: hidden;
    background: #fff;
    padding: 0.341333rem;
    border-radius: 0.16rem;
}
.part1 ul li {
    float: left;
    width: 20%;
    text-align: center;
}
.part1 ul li:last-child {
    border-left: 0.026667rem solid #eee;
    box-sizing: border-box;
}
.part1 ul li .p1 {
    text-align: center;
    color: #000;
    font-size: 0.341333rem;
    line-height: 0.64rem;
}
.part1 ul li .p2 {
    text-align: center;
    color: #000;
    font-size: 0.32rem;
    line-height: 0.64rem;
}
.part1 ul li img {
    height: 0.64rem;
    margin-bottom: 0.08rem;
}
/*part2部分*/
.part2 {
    padding: 0 0.426667rem;
    margin-top: 0.341333rem;
}
.part2 .box3 {
    background: #fff;
    padding: 0.213333rem 0.341333rem;
    border-radius: 0.16rem;
}
.part2 .box3 .part2_title {
    height: 0.853333rem;
    line-height: 0.853333rem;
    border-bottom: 0.026667rem solid #f7f7f7;
}
.part2 .box3 .part2_title p {
    float: left;
    font-size: 0.341333rem;
    color: #000;
    font-weight: bold;
}
.part2 .box3 .part2_title a {
    display: block;
    float: right;
    color: #666;
    font-size: 0.32rem;
}
.part2 .box3 ul{
    padding-top: 0.128rem;
    /*不加 li会掉下去*/
    overflow: hidden;
    margin-top: 0.213333rem;
}
.part2 .box3 ul li{
    width: 20%;
    float: left;
    text-align: center;
}
.part2 .box3 ul li img{
    width: 0.64rem;
    height: 0.64rem;
}
.part2 .box3 ul li p{
    text-align: center;
}
.part2 .box3 ul li .d1{
    width: 0.64rem;
    height: 0.64rem;
    margin: 0 auto;
    position: relative;
}
.part2 .box3 ul li .d1 .yuan{
    position: absolute;
    top: 0;
    right: -0.085333rem;
    width: 0.341333rem;
    height: 0.341333rem;
    background-color: #ff2150;
    border-radius: 50%;
    text-align: center;
    line-height: 0.341333rem;
    color: #fff;
}
/*part3部分*/
.part3{
    padding: 0 0.426667rem;
}
.part3 ul{
    margin-top: 0.341333rem;
    background: #fff;
    padding: 0.64rem 0.341333rem;
    border-radius: 0.16rem;
    overflow: hidden;
}
.part3 ul li{
    float: left;
    width: 25%;
    text-align: center;
}
.part3 ul li img{
    width: 1.066667rem;
}
.part3 ul li p {
    text-align: center;
    font-size: 0.32rem;
    color: #666;
    line-height: 0.64rem;
}
/*part2部分*/
.part2 .part2_body p {
    color: #000;
    line-height: 0.64rem;
    font-size: 0.341333rem;
}
/*推荐*/
.rek-header {
    text-align: center;
    margin-top: 0.298667rem;
}

.rek-header img {
    height: 0.64rem;
}

.rek-body img {
    width: 100%;
}

.rek-box {
    width: 49%;
    height: 7.466667rem;
    border: 0.026667rem solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.old {
    margin-left: 0.384rem;
    font-size: 0.341333rem;
    text-decoration: line-through;
}

.new {
    color: red;
}

.rek-box1-txt {
    display: inline-block;
    height: 1.066667rem;
    font-size: 0.341333rem;
}

.buy img {
    width: 0.554667rem;
    float: right;
}

.rek-body {
    display: flex;
    flex-wrap: wrap;
}

.rek-box1 {
    width: 95%;
}
/*清除a链接默认背景颜色*/
a:hover{
    -webkit-tap-highlight-color: transparent;
}
</style>


<script>
export default {
  name: "my",
  data() {
    return {
        user:"",   //用户名
        show:true,   //是否显示用户名
      array: [
        { image: "/img/logo1.png", wine: "茅台" },
        { image: "/img/logo2.png", wine: "五粮液" },
        { image: "/img/logo3.png", wine: "剑南春" },
        { image: "/img/logo4.png", wine: "习酒" },
      ],
    };
  },
  components: {},
  mounted:function(){
      if(localStorage.getItem('user')){
          this.user=localStorage.getItem('user');
          this.show=false;
          console.log(111)
      }else{
          this.user="";
          this.show=true;
          //console.log(222)
      }
      //var aaa=JSON.parse(localStorage.getItem('user'));
  }
};
</script>